<template>
    <div class="content">
        <div class="table-column-1">
            <ElTable ref="eltableRef" :data="props.data" :row-style="cellStyle" v-bind="$attrs" height="100%"
                width="100%" :header-cell-style="{
                    backgroundColor: 'rgb(62,62,62)',
                    color: '#B5B5BE',
                    fontSize: '20px'
                }" @selection-change="handleSelectionChange">
                <!-- 是否显示多选 -->
                <ElTableColumn v-if="props.isShowSelection" type="selection" :label="$t('页.通用表格.全选')"
                    :selectable="isShowSelection && selectCallback" />

                <!-- 是否显示序号 -->
                <ElTableColumn v-if="props.isShowIndex" type="index" :index="indexMethod" :label="$t('页.通用表格.序号')"
                    width="70px"></ElTableColumn>

                <template v-for="(col, index) in props.cols" :key="index">
                    <ElTableColumn :prop="col.prop" :label="getTranslatedText(col.label)"
                        :width="col.width ? col.width : ''" :fixed="col.fixed || false"
                        :showOverflowTooltip="col.showOverflowTooltip ? true : false">
                        <template #header v-if="col.headSlot">
                            <div class="cell-head-slot">
                                <span class="label">{{ getTranslatedText(col.label) }}</span>
                                <slot :name="col.propHead"></slot>
                            </div>
                        </template>
                        <template #default="scope">
                            <slot v-if="col.slot === true" :name="col.prop" :row="scope.row" :index="scope.$index"
                                :column="scope.column"></slot>
                        </template>
                    </ElTableColumn>
                </template>
            </ElTable>
        </div>

        <div class="table-column-2">
            <el-config-provider :locale="i18n_local">
                <el-pagination v-if="props.isShowPagination" v-bind="props.pageConfig" @current-change="currentChange"
                    @size-change="handleSizeChange" :prev-icon="CaretLeft" :next-icon="CaretRight"
                    :page-size="everyPageNumber" class="GeneralTable-pagination">
                    <template #default>
                        <span class="total-number">
                            {{ $t('total of') }}&nbsp;&nbsp;{{ `${props.pageConfig?.total}` }}&nbsp;&nbsp;{{
                                $t('article') }}
                        </span>
                    </template>
                </el-pagination>
            </el-config-provider>
        </div>
    </div>
</template>

<script setup lang="ts">
import { i18n } from '@/vue-i18n'
import { zhCn, en } from 'element-plus/es/locale/index.mjs'

import { CellStyle, ElTable } from 'element-plus'
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'

type Type_col = {
    label: string;
    prop: string;
    propHead?: string;
    width?: string;
    slot?: boolean;
    headSlot?: boolean;
    fixed?: string;
    showOverflowTooltip?: boolean;
}

type Type_cols = Type_col[]

type Type_pageConfig = {
    layout: string;
    total: number;
    background?: boolean;
    small?: boolean;
    pageSizes?: number[];
    pageSize?: number;
}

interface Type_props {
    // 渲染表格数据
    data: object[]
    // 表弹头
    cols: Type_cols;
    // 是否显示序号
    isShowIndex?: boolean;
    // 是否显示分页
    isShowPagination?: boolean;
    // 是否显示多选按钮
    isShowSelection?: boolean;
    // 分页配置
    pageConfig?: Type_pageConfig;
    // 表格的整体宽度
    width?: string;
    selectListProp?: any[];
    isClearTableCheck?: boolean;
}

const eltableRef = ref<InstanceType<typeof ElTable>>()

const props = withDefaults(defineProps<Type_props>(), {
    isShowIndex: true,
    isShowPagination: true,
    isShowSelection: true,
})

const emit = defineEmits(['getCurrentPage', 'selectListProp'])

const $t = i18n.global.t
const selectionList = ref<any[]>([])

// 当前页,实际在页面中是currentPage + 1页
const currentPage = ref(0)

// 每页有多少数据项,如果配置的话就等于配置的,否则设置为20
const everyPageNumber = ref(props.pageConfig?.pageSize || 20)

// 当翻页时触发事件
const currentChange = (page: number) => {
    currentPage.value = page - 1
    emit('getCurrentPage', currentPage.value, everyPageNumber.value)
}

// 分页大小发生改变
const handleSizeChange = (val: number) => {
    everyPageNumber.value = val
    emit('getCurrentPage', currentPage.value, everyPageNumber.value)
}

const indexMethod = (index: number) => {
    return everyPageNumber.value * currentPage.value + index + 1
}

const cellStyle: CellStyle<any> = ({ row, column, rowIndex, columnIndex }) => {
    if (rowIndex % 2 === 0) {
        return {
            backgroundColor: 'rgb(255,255,255,0.08)',
            color: '#fff',
        }
    } else {
        return {
            backgroundColor: 'rgb(255,255,255,0.13)',
            color: '#fff',
        }
    }
}

// 清空多选项
const handleClearSelection = () => {
    eltableRef.value!.clearSelection()
}

// 当当选择项发生变化时会触发该事件
const handleSelectionChange = (selection: any[]) => {
    selectionList.value = selection
}

const selectCallback = (row: any) => {
    return !row.isBind
}

function getTranslatedText(text: string) {
    if (!text) return
    return $t(text)
}

onMounted(() => {
    // 更改分页组件中的 ‘Go to’ 为中文 ‘跳转至’，并把字体颜色设置为白色
    const elementGoto = document.querySelector('.el-pagination__goto') as HTMLDivElement
    if (elementGoto) {
        // elementGoto.childNodes[0].nodeValue = '跳转至'
        elementGoto['style']['color'] = '#fff'
    }

    const elementClassifier = document.getElementsByClassName('el-pagination__classifier')[0] as HTMLDivElement
    elementClassifier && (elementClassifier['style']['color'] = '#fff')
})

defineExpose({ handleClearSelection })

watch(() => props.isClearTableCheck, (val) => {
    val && props.data.map(tableItem => {
        eltableRef.value && eltableRef.value?.toggleRowSelection(tableItem, false)
    })
})

let i18n_local = zhCn

watch(() => i18n.global.locale, (local: any) => {
    if (local.value === 'zh-Hans') {
        i18n_local = zhCn
    }
    if (local.value === 'en') {
        i18n_local = en
    }
}, { immediate: true, deep: true })
</script>

<style scoped lang="scss">
.el-table {
    background-color: rgb(33, 33, 33);
}

.el-table-column {
    border: 0;
}

.el-pagination {
    margin-top: 10px;
}

.el-pagination {
    justify-content: flex-end;
    float: right;
    overflow: hidden;
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-table {
        width: 100%;
        border-radius: 8px;
    }

    .table-column-1 {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    .table-column-2 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0;
        margin-top: 10px;
    }
}

.el-pagination {
    .total-number {
        color: white;
        margin-left: 16px;
    }

    .el-pagination__jump {
        .el-pagination__goto {
            color: white;
            margin-left: 20px;
        }
    }
}

.cell-head-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;

    .label {
        margin-right: 8px;
    }
}
</style>

<style lang="scss">
.table-combo-block--camera-list {
    flex: 1;
    height: inherit;
    overflow: hidden;
}

.table-visual-frame {
    height: 100%;
    overflow: hidden;
}

.el-table .el-table__inner-wrapper::before {
    background-color: transparent;
}

.el-table {
    background-color: rgb(33, 33, 33);
}

.el-table tbody tr:hover>td,
.el-table__body tr.hover-row>td.el-table__cell {
    background-color: rgba(68, 68, 68, 1) !important;
    margin: 0;
}

.el-table tbody tr {
    padding: 0;
    height: 30px;
}

.el-table thead tr {
    background-color: #24262D;
}

.el-table tr {
    background-color: transparent;
}

/* 每项之间的下边框设置为0,去除每项之间的缝隙 */
.el-table td.el-table__cell {
    border-bottom: 0 !important;
    font-size: 20px;
    margin: 0;
    padding: 9px 2px;
}

/* 去除表头的下边框 */
.el-table th.el-table__cell.is-leaf {
    border-bottom: 0 !important;
}


/* 翻页箭头的背景色 */
.el-pagination.is-background button {
    background-color: #24262D !important;
    color: #fff;
}

/* 翻页的箭头大小 */
.el-pagination.is-background button .el-icon {
    font-size: 16px;
}

.el-pagination.is-background button:hover {
    color: #ccc;
}

.el-pagination.is-background .el-pager li:not(.is-disabled):not(.is-active):hover {
    color: #ccc;
}

/* 被选中的页的背景颜色 */
.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    background-color: #6AB9B0 !important;
}

/* 没有被选中的背景颜色 */
.el-pagination.is-background .el-pager li:not(.is-disabled) {
    background-color: transparent !important;
    color: #fff;
}

.el-pagination .el-pagination__jump .el-input .el-input__wrapper {
    background-color: #24262D;
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
}

.el-pagination .el-pagination__jump .el-input .el-input__wrapper .el-input__inner {
    color: #fff;
}

.table-column-1 {
    .el-checkbox {
        background: transparent;

        .el-checkbox__inner {
            background: transparent;
        }
    }
}
</style>
